<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 
         * state 存放数据的
         * 使用：1、{{$store.state.msg}}
         * 使用：2、data(){
         *      return {
         *          msg: this.$store.state.msg
         *      }
         * }
         * 使用：3、
         * 按需导入 mapState, import {mapState} from 'vuex'
         * export default {
         *      computed:{
         *         ...mapState(['msg'])
         *  }
         * }
         * **/ 

        /**
         * getter 类似于计算属性，对数据加工处理(不会修改原数据),有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters
         * 
         * export default new Vuex.Store({
         *    state:{
         *      count:0,
         *      list:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
         *    },
         *     getters:{
         *       handleCount:(state)=>{
         *          return '当前Count为:' + state.count
         *      },
         *       filterList:  state =>  state.list.filter(item => item > 5)
         *   }
         * })
         * 
         * 
         * 如何使用:
         * 方式一: this.$store.getters.名称
         * 方式二:
         * template>
            <div id="app">{{ handleCount }}</div>
            <div id="app">{{ filterList }}</div>
            </template>
            <script>
            import { mapGetters } from 'vuex';
            export default {
            computed: {
                ...mapGetters(['handleCount','filterList'])
            }
            方式三: <div>{{ $store.getters.filterList }}</div>

         * **/  


        /*
        Mutation 使用来修改 state 中的数据
            export default new Vuex.Store({
                state:{
                    count: 0
                },
                mutations:{
                    addCount: (state)=>{
                        state.count ++
                    },
                    handleAdd:(state,step)=>{
                        state.count += step
                    },
                    changeCount:(state,step)=>{
                        state.count += step
                    },
                },
                actions:{
                    addAsync: (ctx) => {
                        setTimeout(() => {
                            // 必须通过 commit 触发某个 mutation
                            ctx.commit('addCount');
                        }, 100);
                    },
                    addAsyncStep: (ctx, step) => {
                        setTimeout(() => {
                            ctx.commit('handleAdd', step);
                        }, 100);
                    },
                    setAsyncCount (context, num) {
                        // 一秒后, 给一个数, 去修改 num
                        setTimeout(() => {
                            context.commit('changeCount', num)
                        }, 1000)
                    }
                }
        })

        使用1:
            handle(){
                this.$store.commit('addCount',10)
        }
        使用2:借助 mapMutations 
        import  { mapMutations } from 'vuex'
        <template>
        <div>
            <h1>{{ count }}</h1>
            <el-button @click="addAsync">Async+1</el-button>
            <el-button @click="addAsyncStep(5)">Async+5</el-button>
        </div>
        </template>
        <script>
        import { mapActions } from 'vuex';
        export default {
        methods: {
            ...mapActions(['addAsync', 'addAsyncStep']) ----见上面的actions
            }
        };

        */  


        /*
            actions:state是存放数据的，mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)，actions则负责进行异步操作

            使用1：methods:{
                setAsyncCount () {
                    this.$store.dispatch('setAsyncCount', 666)
                }
            }
        */ 


        /*
            import Vue from 'vue';
            import Vuex from 'vuex';
            import moduleA from './modules/moduleA'; // 导入模块A
            import moduleB from './modules/moduleB'; // 导入模块B

            Vue.use(Vuex);

            export default new Vuex.Store({
            modules: {
                moduleA, // 注册模块A
                moduleB // 注册模块B
            },
            // 可选: 根级别的状态、mutation、action、getter等可以在这里定义
            // state: {},
            // mutations: {},
            // actions: {},
            // getters: {}
            });
        */ 



        /*
            持久化1
            vuex-persistedstate插件
            2 pina插件
            3 手动 localStorage.set/get
        */ 
    </script>
</body>
</html>